<template>
	<div class="Echarts">
		<div id="main">
			<div ref="myChart" id="myChart" class="round" style="width: 418.48px;height:250px;">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'capital4',
		data() {
			return {
				cockpitData: []
			}
		},
		mounted() {
			this.getList()

		},
		methods: {
			async getList() {
				// var dt = {
				// 	"params": {
				// 		"normGuid": "5b35e904-9e4e-4728-b1f9-c1a64b1e3f9d",
				// 		"fieldList": [ {
				// 			"key": "area",
				// 			"value": "浙江"
				// 		}, {
				// 			"key": "mapping_code",
				// 			"value": "稀土永磁"
				// 		}]
				// 	}
				// };
				// var _this = this;
				// const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				// let {custom:{result}}={...aaa}
				// _this.cockpitData=result.cockpitData
				this.$nextTick(() => {
					this.myEcharts();
				})
			},
			myEcharts() {
				// console.log(this.cockpitData)
				// let myData = [ 'E轮','D轮', 'C轮', 'B轮','A轮','天使轮'];
				// let dataCh = [ 4, 4, 4, 6, 6, 6];
				// let dataJp = [ 11.78, 18, 18, 16, 20, 20];
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				//配置图表
				if (myChart == null) {
					myChart = this.$echarts.init(this.$refs.myChart); //利用原型调取Echarts的初始化方法

				}

				var option = {
					backgroundColor: '#031245',
					grid: {
						containLabel: true,
						left: 20,
						right: 20,
						bottom: 10,
						top: 40,
					},
					xAxis: {
						axisLabel: {
							color: '#c0c3cd',
							fontSize: 17,
							interval: 0,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#B1B1B1'
							},
							show: true,
						},
						data: ['2017', '2018', '2019', '2020', '2021'],
						type: 'category',
					},
					yAxis: [{
						position: 'left',
						axisLabel: {
							color: '#c0c3cd',
							fontSize: 15,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#556468',
								type: 'dashed',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#B1B1B1',
							},
							show: true,
						},
						name: '单位：亿元',
						nameTextStyle: {
						      color: "#99C8FF",
							  fontSize:14
						}
					}, {
						position: 'right',
						axisLabel: {
							color: '#c0c3cd',
							fontSize: 15,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#556468',
								type: 'dashed',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#B1B1B1',
							},
							show: true,
						},
						name: '单位：%',
						nameTextStyle: {
						      color: "#99C8FF",
							  fontSize:14
						}
					}],
					series: [{
						name: '金额',
						type: 'pictorialBar',
						symbolSize: [40, 23],
						symbolOffset: [0, -10],
						z: 12,
						itemStyle: {
							normal: {
								color: '#14b1eb'
							}
						},
						data: [{
							value: 18,
							symbolPosition: 'end'
						}, {
							value: 30,
							symbolPosition: 'end'
						}, {
							value: 10,
							symbolPosition: 'end'
						}, {
							value: 25,
							symbolPosition: 'end'
						}, {
							value: 60,
							symbolPosition: 'end'
						}]
					}, {
						type: 'bar',
						yAxisIndex: 0,
						itemStyle: {
							normal: {
								color: '#14b1eb',
								opacity: .7
							}
						},
						silent: true,
						barWidth: 40,
						barGap: '-100%', // Make series be overlap
						data: [18, 30, 10, 25, 60]
					}, {
						name: '增长率',
						type: 'line',
						yAxisIndex: 1,
						lineStyle: {
							color: "#00FFE5",
							type: "dashed"
						},
						symbol: "circle",
						symbolSize: 6,
						itemStyle: {
							color: "#00FFE5",
							borderColor: "#00FFE5"
						},
						z: 99,
						data: [20, 40, 12, 70, 50]
					}],
					tooltip: {
						trigger: 'axis',
						show: false,
					},
				};
				myChart.setOption(option);
			}
		}
	}
</script>

<style>
</style>
